<template>
    <div class="home">
        <!-- 头部部分 -->
        <my-header></my-header>

        <!-- 回到顶部 -->
        <!-- <div class="top">
            <i class="iconfont icon-top"></i>
        </div> -->
        
        <!-- 第一个轮播图 -->
        <div class="lun">
             <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <lunbo  v-for="(item,index) in imgList" :key="index" :item="item"></lunbo>
        </van-swipe>
        </div>
       
        <!-- 导航栏 -->
        <!-- <div class="nav">
            <van-grid :column-num="4">
                <van-grid-item>
                     <i class="iconfont ione">&#xe602;</i>
                     <span>装修方案</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe606;</i>
                     <span>效果图</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe609;</i>
                     <span>设计师</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe603;</i>
                     <span>装修工地</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe60b;</i>
                     <span>装修攻略</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe604;</i>
                     <span>装修贷款</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe62c;</i>
                     <span>免费预约</span>
                </van-grid-item>
                <van-grid-item>
                     <i class="iconfont ione">&#xe608;</i>
                     <span>十秒报价</span>
                </van-grid-item>
            </van-grid>
        </div> -->
        <div class="nav">
            <div class="box">
                <div style="background-color:#2bb281">
                    <p class="iconfont">&#xe602;</p>
                </div>
                <p>装修方案</p>
            </div>
            <div class="box" @click="goimg">
                <div style="background-color:#feb505">
                    <p class="iconfont">&#xe606;</p>
                </div>
                <p>效果图</p>
            </div>
             <div class="box">
                <div style="background-color:#eed215">
                    <p class="iconfont">&#xe609;</p>
                </div>
                <p>设计师</p>
            </div>
            <div class="box">
                <div style="background-color:#00b2b2">
                    <p class="iconfont">&#xe623;</p>
                </div>
                <p>装修工地</p>
            </div>
             <div class="box">
                <div style="background-color:#1b9af7">
                    <p class="iconfont">&#xe60b;</p>
                </div>
                <p>装修攻略</p>
            </div>
            <div class="box">
                <div style="background-color:#7b72e9">
                    <p class="iconfont">&#xe604;</p>
                </div>
                <p>装修贷款</p>
            </div>
            <div class="box">
                <div style="background-color:#ff4351">
                    <p class="iconfont">&#xe62c;</p>
                </div>
                <p>免费预约</p>
            </div>
            
            <div class="box">
                <div style="background-color:#fe8864">
                    <p class="iconfont">&#xe608;</p>
                </div>
                <p>十秒报价</p>
            </div>
        </div>

        <!-- 第二个轮播图 全屋装修-->
        <div class="swiper-name">
            <p class="pone">全屋装修</p>
            <p class="ptwo">包设计、包主材、包水电、包施工</p>
        </div>
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <lunbo  v-for="(item,index) in quanwu" :key="index" :item="item.img">
              
            </lunbo>
        </van-swipe>
        <div class="swiper-buttom">
            <div>
               <i class="iconfont ione">&#xe627;</i>
               <p>0增项，标准施工</p>
            </div>
             <div>
               <i class="iconfont ione">&#xe628;</i>
               <p>杜绝项目外包</p>
            </div>
             <div>
               <i class="iconfont ione">&#xe60c;</i>
               <p>装修贷款</p>
            </div>
        </div>

        <!-- 局部装修轮播图 -->
        <div class="swiper-name">
            <p class="pone">局部装修</p>
            <p class="ptwo">局部装修提供厨房翻新卫生间翻新</p>
        </div>
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <lunbo  v-for="(item,index) in jubu" :key="index" :item="item.img"></lunbo>
        </van-swipe>
        <div class="swiper-buttom">
            <div>
               <i class="iconfont ione">&#xe627;</i>
               <p>0增项，标准施工</p>
            </div>
             <div>
               <i class="iconfont ione">&#xe628;</i>
               <p>杜绝项目外包</p>
            </div>
             <div>
               <i class="iconfont ione">&#xe60c;</i>
               <p>装修贷款</p>
            </div>
        </div>
        <!-- 装修预约 -->
        <div class="house">
            <div class="swiper-name">
                <p class="pone">装修预约</p>
                <p class="ptwo">免费上面量房，设计方面满意为止</p>
            </div>
            <div class="inputs">
                <p> <input type="text" placeholder="小区名"></p>
                <p> <input type="text" placeholder="手机号"></p>
               <p>
                  <input type="text" placeholder="建筑面积">
               </p>
               <p>
                   <button>立即申请</button>
               </p>
            </div>
        </div>
        
        <!-- 设计师 -->
        <div class="people">
            <div class="swiper-name">
                <p class="pone">设计师</p>
                <p class="ptwo" style="color:#39cb94;margin-left:200px;" @click="sheji">更多
                  <i class="iconfont icon-more"></i>
                </p>
            </div>
            <div class="imgs">
                <div v-for="(item,index) in shejishi" :key="index" >
                    <img :src="item.img" alt="" @click="shejishii">
                    <p>{{item.name}}</p>
                    <p style="font-size:12px">{{item.level_name}}</p>
                </div>
            </div>
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <lunbo  v-for="(item,index) in rightDisplay" :key="index" :item="item"></lunbo>
              </van-swipe> -->
              <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in shejishi" :key="index">
                  
                </van-swipe-item>
              </van-swipe> -->
        </div>

        <!-- 效果图 -->
        <div class="effect">
           <div class="swiper-name">
                <p class="pone">效果图</p>
            </div>
            <div class="livingRoom">
              <div class="living">
                <p>恒逸金兰湾85平中式古典三居室</p>
              </div>
            </div>
            <div class="little-home">
              <div class="bedroom">
                <p>90平现代精致、大气的现代简约温馨小窝三居室</p>
              </div>
              <div class="bedrooms">
                <p>绿都金域东方101平中式三居室</p>
              </div>
            </div>
            <div class="little-home">
              <div class="kitchen">
                <p>用现代设计打造诗意生活119平现代三居室</p>
              </div>
              <div class="kitchens">
                <p>府尚公馆145平轻奢侈三居室</p>
              </div>
            </div>
            <div class="color">
              <div>换一换
                <i class="iconfont icon-change"></i>
              </div>
              <div @click="xiaoguo">更多效果图
                <i class="iconfont icon-more"></i>
              </div>
            </div>
        </div>
        
        <!-- 工地直播 -->
        <div class="construction">
          <div class="swiper-name">
                <p class="pone">工地直播</p>
          </div>
          <img src="http://img.sirfang.com/effect_img/2020/10/19/433d3f94339a2f5cf79509cbb4cebf9e.jpg" alt="">
          <div class="divs">
            <p class="ps">重汽嘉义苑7栋</p>
            <p class="pss">泥土工程</p>
          </div>
          <div class="color">
              <div>换一换
                <i class="iconfont icon-change"></i>
              </div>
              <div @click="zhibo">更多直播
                <i class="iconfont icon-more"></i>
              </div>
            </div>
        </div>

        <!-- 装修攻略 -->
        <div class="renovation">
          <div class="swiper-name">
                <p class="pone">装修攻略</p>
          </div>
          <ul>
            <li v-for="(item,index) in list" :key="index">
              <img :src="item.img" alt="">
              <div>
                <p>{{item.title}}</p>
                <p>
                  <i class="iconfont icon-time"></i>
                  {{item.edit_time}}
                 
                  <span> <i class="iconfont icon-view"></i></span>
                  {{item.view_num}}
                </p>
              </div>
              
            </li>
          </ul>
          <div class="color">
              <div>换一换
                <i class="iconfont icon-change"></i>
              </div>
              <div @click="guide">更多装修攻略
                <i class="iconfont icon-more"></i>
              </div>
            </div>
        </div>

        

        <!-- 底部 -->
        <my-buttom></my-buttom>
    </div>
</template>
<script>
import lunbo from "../components/Swiper.vue";
import axios from "axios";
import myHeader from "@/components/myHeader";
import myButtom from "@/components/Bottom.vue";
export default {
  data() {
    return {
      imgList: ["/切图/banner.jpg", "/切图/banner1.jpg"],
      rightDisplay: [
        {
          imgs: [
            {
              src: "/切图/banner.jpg",
              title: "版权名称"
            },
            {
              src: "/切图/banner.jpg",
              title: "版权名称2"
            },
            {
              src: "/切图/banner.jpg",
              title: "版权名称3"
            }
          ]
        },
        {
          imgs: [
            {
              src: "/切图/banner.jpg",
              title: "版权名称4"
            },
            {
              src: "/切图/banner.jpg",
              title: "版权名称5"
            },
            {
              src: "/切图/banner.jpg",
              title: "版权名称6"
            }
          ]
        }
      ],
      list: [],
      quanwu:[],
      jubu:[],
      shejishi:[],
};
  },
  components: {
    lunbo,
    myHeader,
    myButtom,
  },
  created() {
    axios.get("gongnue.json").then(res => {
      // console.log(res);
      this.list = res.data;
    });
    axios.get("/api/home/shejishi").then((res)=>{
      console.log(res.data.data.list);
      this.shejishi=res.data.data.list;
    })
    axios.get("/api/home").then((res)=>{
      // console.log(res);
      // console.log(res.data);
      // console.log(res.data.data.plan.quanwuzhuangxiu);
      this.quanwu=res.data.data.plan.quanwuzhuangxiu;
      this.jubu=res.data.data.plan.jubuzhuangxiu
    })
   
    // axios.get("/api/home/zhibo").then((res)=>{
    //   console.log(res);
    // })
   
  },
  methods: {
    sheji(){
      this.$router.push('/Sheji')
    },
   xiaoguo(){
     this.$router.push('/xiaoguo')
   },
    guide(){
      this.$router.push('/guide')
    },
    zhuangxiufangan(){
      this.$router.push('/zxType')
    },
    goimg(){
      this.$router.push('/imgdetail')
    },
    zhibo(){
      this.$router.push('/zhibo')
    },
    shejishii(){
      this.$router.push('/shejishiDetail')
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  background-color: #eaeaea;
}
.my-swipe {
  width: 100%;
  height: 200px;
}
lunbo {
  width: 100%;
  height: 200px;
}
.lun {
  margin-top: 80px;
}
.swiper-name {
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
  background-color: #ffffff;
  margin-top: 10px;
  padding-top: 10px;
  p {
    margin: 10px;
    padding: 0;
  }
  .pone {
    border-left: 3px solid #39cb94;
    font-size: 24px;
    padding-left: 10px;
  }
  .ptwo {
    color: #999999;
    font-size: 15px;
  }
}
.nav {
  width: 100%;
  height: 280px;
  // background-color: red;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  color: #999999;
  background-color: #ffffff;
  margin-top: 10px;
  .box {
    background-color: #ffffff;
    margin: 0 1.5px;
    .iconfont {
      width: 100px;
      height: 100px;
      // text-align: center;
    }
    // background-color: #39cb94;
    width: 90px;
    height: 90px;
    text-align: center;
    div {
      // align-items: center;
      margin: 0 12px;
      width: 60px;
      border-radius: 50%;
      height: 60px;
      background-color: aqua;
      text-align: center;

      p {
        margin-left: -20px;
        // margin-top: 40px;
        line-height: 65px;
        color: white;
        font-size: 35px;
      }
    }
  }
}
.swiper-buttom {
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
  background-color: #ffffff;
  font-size: 15px;
  align-items: center;
  div {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }
  i {
    font-size: 15px;
    color: #39c894;
    margin: 0 5px;
  }
}
.house {
  background-color: #ffffff;
  width: 100%;
  height: 320px;
  .inputs {
    input {
      width: 80%;
      padding-left: 10px;
      height: 40px;
      margin: 0 25px;
      border-radius: 5px;
      border: 1px solid #cccccc;
      font-size: 20px;
    }
    button {
      width: 80%;
      margin: 0 25px;
      border: none;
      background-color: #feb505;
      height: 45px;
      color: #feecc8;
      border-radius: 5px;
      margin-bottom: 30px;
      font-size: 20px;
    }
  }
}
.people {
  width: 100%;
  height: 230px;
  background-color: #ffffff;
  .imgs {
    text-align: center;
    display: flex;
    font-size: 20px;
    line-height: 10px;
    div {
      margin: 15px;
      font-size: 16px;
    }
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
}
.effect {
  font-size: 14px;
  width: 100%;
  height: 680px;
  background-color: #ffffff;
  .livingRoom {
    width: 100%;
    height: 250px;
    padding: 10px;
    background-color: #ffffff;
    .living {
      width: 95%;
      height: 100%;
      background-image: url("http://img.sirfang.com/effect_img/2020/10/19/72c0d640244c7e195f30661c44f5f5e7.jpg");
      background-size: 100% 100%;
      position: relative;
      p {
        display: inline-block;
        background-color: rgba(22, 22, 22, 0.5);
        width: 70%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        bottom: 0px;
        color: #ffffff;
      }
    }
  }
  .little-home {
    width: 100%;
    height: 130px;
    padding-left: 10px;
    display: flex;
    margin-bottom: 5px;
    .bedroom {
      width: 46.3%;
      height: 100%;
      background-size: 100% 100%;
      background-image: url("http://img.sirfang.com/effect_img/2020/10/19/5cb8ae4f30abaaa665350b0dce2e22cf.jpg");
      p {
        background-color: rgba(22, 22, 22, 0.5);
        width: 100%;
        margin-top: 80px;
        line-height: 20px;
        border-radius: 5px;
        color: #ffffff;
      }
    }
    .bedrooms {
      margin-left: 10px;
      width: 46.3%;
      height: 100%;
      background-size: 100% 100%;
      background-image: url("http://img.sirfang.com/effect_img/2020/10/19/433d3f94339a2f5cf79509cbb4cebf9e.jpg");
      p {
        background-color: rgba(22, 22, 22, 0.5);
        width: 100%;
        margin-top: 80px;
        line-height: 20px;
        border-radius: 5px;
        color: #ffffff;
      }
    }
  }
  .little-home {
    width: 100%;
    height: 130px;
    padding-left: 10px;
    display: flex;
    margin-bottom: 5px;
    .kitchen {
      width: 46.3%;
      height: 100%;
      background-size: 100% 100%;
      background-image: url("http://img.sirfang.com/effect_img/2020/10/19/5cb8ae4f30abaaa665350b0dce2e22cf.jpg");
      p {
        background-color: rgba(22, 22, 22, 0.5);
        width: 100%;
        margin-top: 80px;
        line-height: 20px;
        border-radius: 5px;
        color: #ffffff;
      }
    }
    .kitchens {
      margin-left: 10px;
      width: 46.3%;
      height: 100%;
      background-size: 100% 100%;
      background-image: url("http://img.sirfang.com/effect_img/2020/10/19/433d3f94339a2f5cf79509cbb4cebf9e.jpg");
      p {
        background-color: rgba(22, 22, 22, 0.5);
        width: 100%;
        margin-top: 80px;
        line-height: 20px;
        border-radius: 5px;
        color: #ffffff;
      }
    }
  }
}
.construction {
  width: 100%;
  height: 445px;
  background-color: #ffffff;
  img {
    width: 95%;
    height: 250px;
    margin-left: 10px;
  }

  .divs {
    margin-top: -10px;
    display: flex;
    // line-height: 5px;
    .ps {
      font-size: 18px;
      margin-left: 10px;
    }
    .pss {
      font-size: 16px;
      background-color: #39c894;
      color: white;
      width: 70px;
      border-radius: 5px;
      height: 25px;
      text-align: center;
      margin-top: 20px;
      margin-left: 10px;
    }
  }
}
.color {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  color: #39c894;
  padding: 0 10px;
  align-items: center;

  div {
    // flex: 1;
    border: 0.5px solid #cccccc;
    width: 177.5px;
    height: 100%;
    // background-color: red;
    text-align: center;
    line-height: 50px;
  }
}
.renovation {
  width: 100%;
  height: 580px;
  background-color: #ffffff;
  img {
    width: 140px;
    height: 100px;
    margin-right: 10px;
  }
  ul {
    li {
      display: flex;
      margin: 20px 10px;
      border-bottom: 1px solid #ccc;
      height: 120px;
      span{
        margin-left: 30px;
      }
    }
  }
}
// .top{
//     margin-top: 200px;
//     background-color: red;
//     width: 40px;
//     height: 40px;
//     text-align: center;
//     line-height: 40px;
//     border-radius: 50%;
//     position: fixed;
//     right: 15px;
//     bottom: 100px;
//     background-color: #ccc;
//     color: white;
// }
</style>
